<template>
	<el-dialog v-model="dialogVisible" title="字典值管理" width="60%">
		<div class="pos-r flex-1" style="box-sizing: border-box; overflow: hidden; height: 69vh;">
			<div class="w-h-100 ver-flex" style="box-sizing: border-box; padding: 6px">
				<div style="box-sizing: border-box">
					<v-search :search-arr="searchObjArr" @submit="searchHandle">
						<el-button type="primary" icon="ele-Plus" @click="() => addHandle()"> 新增数据 </el-button>
					</v-search>
				</div>
				<div style="box-sizing: border-box; margin-top: 8px" class="flex-1 pos-r">
					<div class="pos-a w-h-100" style="box-sizing: border-box">
						<el-card class="box-card w-h-100" >
							<div style="" class="w-h-100 ver-flex">
								<div class="flex-1 pos-r">
									<div class="pos-a w-h-100" style="">
										<el-table :data="list" border class="w-h-100" v-loading="loading">
											<el-table-column type="index" label="序号" width="60" align="center" :index="indexMethod" />
											<el-table-column prop="value" label="字典值" align="center" />
											<el-table-column prop="code" label="唯一编码" align="center" :showOverflowTooltip="true" />
											<el-table-column prop="sort" label="排序" align="center" />

											<el-table-column prop="remark" label="备注" align="center" />
											<!-- <el-table-column prop="status" label="状态" align="center" /> -->
											<el-table-column prop="status" label="状态" align="center">
												<template #default="scope">
													{{ getStatusVal(scope.row.status) }}
												</template>
											</el-table-column>
											<el-table-column prop="name" label="操作" align="center" width="160">
												<template #default="scope">
													<el-button icon="ele-Edit" size="small" text type="primary" @click="() => addHandle(scope.row)"> 编辑 </el-button>
													<el-popconfirm confirm-button-text="确认" cancel-button-text="取消" icon="InfoFilled" icon-color="#626AEF" title="删除这条数据?" @confirm="deleteHandle(scope.row)">
														<template #reference>
															<el-button icon="ele-Delete" size="small" text type="danger"> 删除 </el-button>
														</template>
													</el-popconfirm>
												</template>
											</el-table-column>
										</el-table>
									</div>
								</div>
								<div style="height: 30px; margin-top: 20px" class="hr-flex-start">
									<el-pagination
										v-model:currentPage="pageNo"
										v-model:page-size="pageSize"
										:total="totalRows"
										:page-sizes="[10, 20, 50, 100]"
										small
										background
										@size-change="handleSizeChange"
										@current-change="handleCurrentChange"
										layout="total, sizes, prev, pager, next, jumper"
										class="w-h-100"
									/>
								</div>
							</div>
						</el-card>
					</div>
				</div>
			</div>
			<v-dic-data-form ref="formRef" @submit="(param: any) => submitHandle(param)"> </v-dic-data-form>
		</div>
	</el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue';
import getTableData from '/@/utils/getTableData';
import request from '/@/api/develop/dic';
import VSearch from '/@/components/search/v-search.vue';
import VDicDataForm from './v-dic-data-form.vue';
import { DicListData } from '/@/types/system/dict';
export default defineComponent({
	components: {
		VSearch,
		VDicDataForm,
	},
	setup() {
		type DicStatusType = {
			code: string;
			value: string;
		}

		const dicStatusList = ref<DicStatusType[]>()

		// 搜索关键字
		const searchObj = reactive({
			value: '',
			code: '',
			typeId: '',
		});

		const dialogVisible = ref(false);

		const formRef = ref<any>();

		const searchObjArr: any[] = [
			{
				label: '字典值',
				key: 'value',
				slot: null,
				type: 'input',
				value: '',
			},
			{
				label: '唯一编码',
				key: 'code',
				slot: null,
				type: 'input',
				value: '',
			},
		];

		let tableDataObj = getTableData(request.getDicDataList, {}, searchObj, false, false);

		// 搜索
		const searchHandle = (params: any) => {
			searchObj.value = params.value;
			searchObj.code = params.code;
			tableDataObj.searchHandle();
		};

		// 删除
		const deleteHandle = async (rows: any) => {
			await request.deleteDicData({ id: rows.id });
			tableDataObj.getData();
		};

		// 提交
		const submitHandle = async (param: any) => {
			let newParam = {
				...param,
				typeId: searchObj.typeId
			}
			if (newParam.id) {
				await request.editDicData(newParam);
			} else {
				await request.addDicData(newParam);
			}
			tableDataObj.getData();
		};

		// 新增
		const addHandle = async (data?: {}) => {
			formRef.value.addNew(data);
		};

		// 打开弹窗
		const dialogControl = (id: any, statusList: DicStatusType[]) => {
			searchObj.typeId = id
			dialogVisible.value = !dialogVisible.value
			dicStatusList.value = statusList
			tableDataObj.searchHandle();
		}

		// 获取对应的状态值
		const getStatusVal = (status: string | number) => {
			let filterArr = dicStatusList.value?.filter( item => {
				return item.code == status
			})
			return filterArr?.[0]?.value || ''
		}
		return {
			...tableDataObj,
			...toRefs(searchObj),
			searchObjArr,
			deleteHandle,
			submitHandle,
			addHandle,
			formRef,
			searchHandle,
			dialogVisible,
			dialogControl,
			dicStatusList,
			getStatusVal,
		};
	},
});
</script>

<style lang="scss" scoped>
	:deep(.el-card__body) {
		height: 100%;
	}
</style>
